<div class="row">
  <div class="col-md-6">
    <div class="btn-group">
      <div
        class="btn btn-primary"
        mwlCalendarPreviousView
        [view]="'day'"
        [(viewDate)]="viewDate"
      >
        Previous
      </div>
      <div
        class="btn btn-outline-secondary"
        mwlCalendarToday
        [(viewDate)]="viewDate"
      >
        Today
      </div>
      <div
        class="btn btn-primary"
        mwlCalendarNextView
        [view]="'day'"
        [(viewDate)]="viewDate"
      >
        Next
      </div>
    </div>
  </div>
  <div class="col-md-6 text-right">
    <h3>{{ viewDate | calendarDate:('dayViewTitle') }}</h3>
  </div>
</div>
<br />

<mwl-day-view-scheduler
  [viewDate]="viewDate"
  [events]="events"
  [users]="users"
  (eventTimesChanged)="eventTimesChanged($event)"
  (userChanged)="userChanged($event)"
/>
